<template>
  <div class="table-page">
    <GiTable
        row-key="id"
        title="项目裁判管理"
        :data="dataList"
        :columns="columns"
        :loading="loading"
        :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
        :pagination="pagination"
        :disabled-tools="['size']"
        :disabled-column-keys="['name']"
        @refresh="search"
    >
      <template #custom-left>
        <!--	        <a-input v-model="queryForm.projectId" placeholder="请输入比赛项目名称" allow-clear @change="search">-->
        <!--	          <template #prefix><icon-search /></template>-->
        <!--	        </a-input>-->
        <a-input v-model="queryForm.refereeId" placeholder="请输入裁判员名称" allow-clear @change="search">
          <template #prefix>
            <icon-search/>
          </template>
        </a-input>
        <a-button @click="reset">重置</a-button>
      </template>
      <template #custom-right>
        <a-button v-permission="['sport:projectReferee:add']" type="primary" @click="addReferee">
          <template #icon>
            <icon-plus/>
          </template>
          <span>新增</span>
        </a-button>
      </template>
      <template #action="{ record }">
        <a-space>
          <a-link
              v-permission="['sport:projectReferee:delete']"
              status="danger"
              :disabled="record.disabled"
              @click="onDelete(record)"
          >
            删除
          </a-link>
        </a-space>
      </template>
    </GiTable>
  </div>
  <a-modal v-model:visible="visible" @ok="handleOk" @cancel="handleCancel">
    <template #title>
      Title
    </template>
    <a-form :model="form" :auto-label-width="true" layout="horizontal">
      <a-space direction="vertical" :style="{ width: '300px' }" style="margin: 0 auto">
        <a-form-item field="name" :style="{ width: '300px' }" label="裁判">
          <a-select v-model="selectedOptions" style="margin: 0 auto" placeholder="请选择裁判" multiple
                    :filter-option="false">
            <a-option v-for="item of options" :value="item.id">{{ item.username }}</a-option>
          </a-select>
        </a-form-item>
      </a-space>
    </a-form>
  </a-modal>
</template>
<script setup lang="ts">
import {
  type ProjectRefereeResp,
  type ProjectRefereeQuery,
  deleteProjectReferee,
  exportProjectReferee,
  listProjectReferee,
  listRefereeUser, addProjectReferee, bathAddProjectReferee
} from '@/apis'
import type {TableInstanceColumns} from '@/components/GiTable/type'
import {useForm, useTable} from '@/hooks'
import {isMobile} from '@/utils'
import has from '@/utils/has'
import {Message} from "@arco-design/web-vue";

defineOptions({name: 'ProjectReferee'})
const route = useRoute();
const projectId = route.query.id;

const queryForm = reactive<ProjectRefereeQuery>({
  projectId: projectId as string,
  refereeId: "",
  sort: ['createTime,desc']
})


const {
  tableData: dataList,
  loading,
  pagination,
  search,
  handleDelete
} = useTable((page) => listProjectReferee({...queryForm, ...page}), {immediate: true})

const columns: TableInstanceColumns[] = [
  {title: '比赛项目', dataIndex: 'projectName', slotName: 'projectName'},
  {title: '裁判员姓名', dataIndex: 'refereeName', slotName: 'refereeName'},
  {
    title: '操作',
    slotName: 'action',
    width: 130,
    align: 'center',
    fixed: !isMobile() ? 'right' : undefined,
    show: has.hasPermOr(['sport:projectReferee:update', 'sport:projectReferee:delete'])
  }
]

// 重置
const reset = () => {
  queryForm.projectId = ""
  queryForm.refereeId = ""
  search()
}

// 删除
// todo bug：删除裁判后需要刷新页面才能重新搜索到裁判
const onDelete = (item: ProjectRefereeResp) => {
  return handleDelete(() => deleteProjectReferee(item.id), {
    content: `是否确定删除该条数据？`,
    showModal: true
  })
}

// 添加裁判
const selectedOptions = ref([]);
const options = ref();
const {form} = useForm({
  refereeId: '',
  projectId: projectId
})
onMounted(() => {
  searchReferee()
})
const searchReferee = async () => {
  // 从后端获取数据
  const res = await listRefereeUser(projectId);
  options.value = res.data as any;
};
const visible = ref(false);
const addReferee = async () => {
  visible.value = true;
}
const handleOk = async () => {
  visible.value = false;
  if (projectId == null || projectId == '') {
    Message.error('请先选择比赛项目')
    return
  }
  console.log(projectId)
  console.log(selectedOptions.value)
  // todo 添加裁判
  const res = await bathAddProjectReferee({refereeIds: selectedOptions.value, projectId: projectId})
  if (res.code == 200) {
    Message.success('添加成功')
    selectedOptions.value = []
    search()
  } else {
    Message.error('添加失败')
  }
};
const handleCancel = () => {
  visible.value = false;
}


</script>

<style lang="scss" scoped></style>
